<template>
  <div class="shop-detail">
    <div class="page-header">
      <h2>{{ isEdit ? '编辑商品' : (isAdd ? '添加商品' : '商品详情') }}</h2>
      <div>
        <el-button @click="goBack">返回</el-button>
        <el-button v-if="!isEdit && !isAdd" type="primary" @click="handleEdit">编辑</el-button>
        <el-button v-if="isEdit || isAdd" type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
    
    <el-card class="box-card">
      <el-form :model="productForm" label-width="100px" :disabled="!isEdit && !isAdd">
        <el-form-item label="商品名称" prop="name">
          <el-input v-model="productForm.name" placeholder="请输入商品名称"></el-input>
        </el-form-item>
        
        <el-form-item label="商品图片" prop="image">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="商品价格" prop="price">
          <el-input-number v-model="productForm.price" :precision="2" :min="0"></el-input-number>
        </el-form-item>
        
        <el-form-item label="商品库存" prop="stock">
          <el-input-number v-model="productForm.stock" :min="0" :precision="0"></el-input-number>
        </el-form-item>
        
        <el-form-item label="商品类型" prop="type">
          <el-select v-model="productForm.type" placeholder="请选择商品类型">
            <el-option label="运动器材" value="运动器材"></el-option>
            <el-option label="健康食品" value="健康食品"></el-option>
            <el-option label="保健品" value="保健品"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="商品状态" prop="status">
          <el-radio-group v-model="productForm.status">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="0">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="商品描述" prop="description">
          <el-input type="textarea" v-model="productForm.description" rows="4" placeholder="请输入商品描述"></el-input>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    return {
      router,
      route
    }
  },
  data() {
    return {
      isEdit: false,
      isAdd: false,
      productForm: {
        id: '',
        name: '',
        image: '',
        price: 0,
        stock: 0,
        type: '',
        status: 1,
        description: '',
        createdAt: ''
      }
    }
  },
  created() {
    const route = this.route;
    this.isEdit = route.name === 'ShopEdit';
    this.isAdd = route.name === 'ShopAdd';
    
    if (!this.isAdd) {
      // 获取商品ID
      const id = route.params.id;
      // 这里获取商品详情数据
      this.fetchProductDetail(id);
    }
  },
  methods: {
    goBack() {
      this.router.push('/admin/shop');
    },
    handleEdit() {
      const id = this.route.params.id;
      this.router.push(`/admin/shop/edit/${id}`);
    },
    handleSave() {
      // 保存商品数据
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.goBack();
    },
    fetchProductDetail(id) {
      // 模拟获取数据
      if (id === '1') {
        this.productForm = {
          id: 1,
          name: '智能手环',
          image: 'https://placeholder.pics/svg/200/3498DB/FFFFFF/智能手环',
          price: 299,
          stock: 100,
          type: '运动器材',
          status: 1,
          description: '这是一款专业的智能手环，可以监测心率、计步、睡眠质量等多项健康指标。',
          createdAt: '2023-10-15 14:30:00'
        };
      }
    }
  }
}
</script>

<style scoped>
.shop-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
</style> 